import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image, ScrollView, Input } from '@tarojs/components'
import Iconfont from '@/components/Iconfont'
import EmptyView from '@/components/EmptyView'
import CouponView from '@/components/CouponView'
import classnames from 'classnames'
import { getCouponList,getPlatformCouponList, conversionCoupon } from '@/api/coupon'
import { staticUrl } from '@/utils'

import './index.scss'

interface State{
  coupon: GlobalCoupon.Coupon[] | null
  tabIndex: number
  code: string
}

export default class Index extends Component {
    constructor(props) {
      super(props)
      this.state = {
        tabIndex: 1,
        coupon: null,
        code: ''
      }
    }
    state: State
    UNSAFE_componentWillMount() {}
    componentDidMount() {
      this.getCouponData()
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {}
    componentWillUnmount() {}
    couponStatus = {
      '0': '未使用',
      '1': '已使用',
      '2': '已过期',
      '3': '已转增'
    }
    componentDidShow() {}
    componentDidHide() {}
    componentDidCatchError() {}
    componentDidNotFound() {}


    tabData(i: number) {
      this.setState({
        tabIndex: i
      }, () => this.getCouponData())
    }

    goToDetails(list, index?: number) {
			console.log('list',list)
			if(list.belongType == 1){ // 门店券，需要传递具体那个门店编码过去，以便自动选中

			}
      if (index) {
				let url = list.belongType == 1 ? `/pages/coupon/details/index?id=${list.id}&tabType=${index}&belongStoreCode=${list.belongStoreCode}` : `/pages/coupon/details/index?id=${list.id}&tabType=${index}`
        Taro.navigateTo({
          url
        })
      } else {
				let url = list.belongType == 1 ? `/pages/coupon/details/index?id=${list.id}&belongStoreCode=${list.belongStoreCode}` : `/pages/coupon/details/index?id=${list.id}`
        Taro.navigateTo({
          url
        })
      }
    }

    getCouponData() {
      const { tabIndex } = this.state

      getPlatformCouponList({
        type: tabIndex,
        query: {
          perPage: 100
        }
      }).then(res => {
        const coupon = res.data['data']
        this.setState({
          coupon
        })
      })
    }

    getCouponCode(e) {
      const { value } = e.detail
      this.setState({
        code: value
      })
      return value
    }

    conversion() {
      const { code } = this.state

      if (!code.length) {
        Taro.showToast({
          icon: 'none',
          title: '请输入兑换码',
          duration: 2000
        })
        return
      }
      conversionCoupon({
        exchangeCode: code
      }).then(res => {
        this.getCouponData()
        this.setState({
          code: ''
        })
        Taro.showToast({
          title: '兑换成功',
          duration: 2000
        })
      })
    }

    userCouponListView() {
      const { coupon, tabIndex } = this.state
      return coupon && (
        <View className='coupon-bd'>
          {
            coupon && coupon.length ? (
              <ScrollView scrollY className='tab-cont'>
                <View className='tab-cont-item'>
                  {coupon.map(v => {
                    return (
                      <CouponView key={v.id} list={v} disable={tabIndex === 2} handleEvent={() => this.goToDetails(v, tabIndex)} />
                    )
                  })}
                </View>
                <View className='scroll-bt-tips'>没有更多记录啦</View>
              </ScrollView>
            ) : <EmptyView title='没有卡券记录' />
          }
        </View>
      )
    }

    couponCodeView() {
      const { code, tabIndex } = this.state
      return (
        <View className='coupon-code'>
          <View
            className='coupon-history'
            onClick={() => {
              Taro.navigateTo({
                url: '/pages/coupon/history/index'
              })
            }}
          >
            <Iconfont
              size='38'
              color='#fff'
              name='icon-exclamation-circle-o'
            ></Iconfont>
          </View>
          <Image
            src={staticUrl(`/img/coupon/${tabIndex === 1 ? 'banner.jpg' : 'banner2.jpg'}`)}
            className='bg'
          ></Image>
          <View className='coupon-code-wrap'>
            <Input
              placeholderStyle='color: #999'
              className='code'
              placeholder='请输入兑换码'
              value={code}
              onInput={(e) => this.getCouponCode(e)}
            ></Input>
            <View onClick={() => this.conversion()} className='confirm-btn'>兑换</View>
          </View>
        </View>
      )
    }

    render() {
      const { tabIndex } = this.state

      return (
        <View className='coupon-index'>
          <View className='fixed-top'>
            <View className='tab-item'>
              <View
                onClick={() => {
                  this.tabData(1)
                }}
                className={classnames(
                  'tab-li',
                  tabIndex === 1 && 'act'
                )}
              >
                <View className='tab-li-text'>当前城市适用</View>
              </View>
              <View
                onClick={() => {
                  this.tabData(2)
                }}
                className={classnames(
                  'tab-li',
                  tabIndex === 2 && 'act'
                )}
              >
                <View className='tab-li-text'>当前城市不适用</View>
              </View>
            </View>
            {this.couponCodeView()}
          </View>
          {this.userCouponListView()}
        </View>
      )
    }
}
